<template>
	<view>
		<view v-if="currntSong" class="player-container" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
			<view class="circle-disc">
				<image :src="currntSong.picUrl" :lazy-load="true" mode="widthFix"></image>
			</view>
			<view class="music-info" @click="openPlay">
			 <text class="song">{{currntSong.name}}</text><text class="singer">-{{currntSong.singer}}</text>
			</view>
			<i :class="playing?'iconfont icon-weibiaoti--':'iconfont icon-bg-play'" @click="stopMusic"></i>
			<i class="iconfont icon-24gf-playlistMusic"></i>
		</view>
		<view v-else class="player-container">
			<view class="circle-disc">
				<image src="../../static/logo.png" :lazy-load="true" mode="widthFix"></image>
			</view>
			<view class="music-info">
			 <text class="song">歌曲</text><text class="singer">-歌手</text>
			</view>
			<i class="iconfont icon-bg-play"></i>
			<i class="iconfont icon-24gf-playlistMusic"></i>
		</view>
		<uni-popup class="popup-play" ref="popup" :mask-click="false">
			<myuni-fmplay v-if="fm" @leftTap="closePlay" @emitPlay="stopMusic" @emitPre="emitChangeSong" @emitNext="emitChangeSong" :currntSong="currntSong" :playing="playing" :single="currntSong.single" :fm="fm"></myuni-fmplay>
		    <myuni-play v-else @leftTap="closePlay" @emitPlay="stopMusic" @emitPre="emitChangeSong" @emitNext="emitChangeSong" :currntSong="currntSong" :playing="playing" :single="currntSong.single"></myuni-play>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		props:{
			currntSong:{
				type:[Array,Object],
				default:[]
			},
			fm:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				playing:false,
				muisc:{}
			}
		},
		computed:{
			...mapState(['themeType'])
		},
		mounted() {
			this.playing = this.currntSong.playing
			if(this.currntSong.url&&!this.$Audio.src){
				this.$Audio.src = this.currntSong.url; //音频地址
			}
		},
		methods: {
			stopMusic(){
				this.playing = !this.playing
				if(this.playing){
					this.$Audio.play()
				}else{
					this.$Audio.pause()
				}
			},
			openPlay(){
			      this.$refs.popup.open('bottom')
			},
			closePlay(){
				console.log(1)
				this.$refs.popup.close()
			},
			emitChangeSong(isNext){
				this.$emit('emitChangeSong',isNext)
			}
		},
		watch:{
			currntSong(news){
				this.playing = news.playing
				if(news.url&&news.playing){
					// 实例化声音
					this.$Audio.src = news.url; //音频地址  
					this.$Audio.play(); //执行播放  
				}
			},
			fm(val){
				if(val){
					this.openPlay()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.player-container{
	position: fixed;
	display: flex;
	bottom: 0rpx;
	/*  #ifndef  MP-WEIXIN || APP-PLUS */
     bottom: 49px;
	/*  #endif  */
	left: 0;
	height: 100rpx;
	width: 100%;
	// background-color: #17171a;
	color: #707070;
	.circle-disc{
		display: flex;
		justify-content: center;
		align-items: center;
		position:absolute;
	    left: 10rpx;
		top: -10rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: red;
		border-radius: 50%;
		overflow: hidden;
		background:url(../../static/img/disc.png) no-repeat;
		background-size: 100%;
		image{
			position: absolute;
			width: 70%;
			border-radius: 50%;
		}
		&::before{
			content: '';
			display: block;
			width: 100rpx;
			height: 100rpx;
			background: url(../../static/img/disc-dot.png) no-repeat;
			background-size: 100%;
			transform: rotate(-45deg);
		}
	}
	.music-info{
		flex: 1;
		line-height: 100rpx;
		padding-left: 110rpx;
		color: #707070;
		.song{
		}
		.singer{
			font-size: 22rpx;
			color: #707070;
		}
	}
	i{
	  display: block;
	  text-align: center;
	  width: 100rpx;
	  height: 100rpx;
	  font-size: 40rpx;
	  line-height: 100rpx;
	}
	::v-deep.popup-play{
		z-index: 10000 !important;
	}
}
</style>
